<template>
	<div class="tabelContainer">		
		<basic-container>
			<div class="plan_container">
				<avue-form v-model="form" :option="option" @submit="handleSubmit">
					<template slot-scope="scope" slot="map">
						<div>
							<lcUpload @success='picSuccess'></lcUpload>
							<div class='plan_wrap' 
								:style="{backgroundImage: 'url(' + imgUrl + ')',width:bgWidth+'px',height:bgHeight+'px'}"
								 v-if="imgUrl">
							</div>
						</div>
					</template>
				</avue-form>
			</div>
		</basic-container>
	</div>
</template>
<script>
	import lcUpload from "@/components/upload/uploadImg"
	import { getData, planSubmit } from "@/api/dust/plan";
	export default {
		components: {
			lcUpload
		},
		data() {
			return {
				bgWidth: 0,
				bgHeight: 0,
				imgUrl: '',
				form: {},
				option: {
					menuBtn:true,
					group: [{
						icon: 'el-icon-edit-outline',
						label: '效果图配置',
						collapse: true,
						prop: 'group',
						column: [{
								label: '所属项目',
								prop: 'deptInfoId',
								type: "select",
								dicUrl: "/api/squirrel-ficm/deptinfo/getProjectList",
								props: {
									label: "deptName",
									value: "id"
								},
								rules: [{
									required: true,
									message: "请选择所属项目",
									trigger: "blur"
								}],
								change: ({
									value,
									column
								}) => {
									if(value == '') {
										return false
									} else {
										this.init(value)
									}
								}
							},
							{
								label: '地图名称',
								prop: 'picName',
								span: 12
							},
							{
								label: '分辨率',
								prop: 'resolution',
								span: 12
							},
							{
								label: '尺寸(宽)',
								prop: 'width',
								span: 6,
								disabled: true,
								placeholder:' '
							},
							{
								label: '尺寸(高)',
								prop: 'height',
								span: 6,
								disabled: true,
								placeholder:' '
							},
							{
								label: '预览',
								prop: 'map',
								span: 24,
								formslot: true
							}
						]
					}]
				}
			};
		},
		methods: {
			picSuccess(url) {
				this.imgUrl = url
				// 创建图片原型获取图片宽高
				let img = new Image();
				img.src = url;
				let that = this
				// 图片加载异步 必须用这个才可以获取到 指定图片宽高为1000 UI需要配合把工地地图做到这个比例
				img.onload = function() {
					that.bgWidth = 1000
					that.bgHeight = 1000
					that.form.height = 1000
					that.form.width = 1000
				};
			},
			init(deptInfoId) {
				getData(deptInfoId).then(res => {
					this.form.id = res.data.data.id ? res.data.data.id : ''
					this.form.picName = res.data.data.picName ? res.data.data.picName : ''
					this.form.height = res.data.data.height ? res.data.data.height : ''
					this.form.width = res.data.data.width ? res.data.data.width : ''
					this.form.resolution = res.data.data.resolution ? res.data.data.resolution : ''
					this.form.picUrl = res.data.data.picUrl ? res.data.data.picUrl : ''
					this.imgUrl = res.data.data.picUrl ? res.data.data.picUrl : ''
					if(this.imgUrl) {
						this.bgWidth = res.data.data.width
						this.bgHeight = res.data.data.height
					}
				})
			},
			// 提交
			handleSubmit(form, done) {
				let params = {
					deptInfoId: form.deptInfoId,
					height: form.height,
					picName: form.picName,
					picUrl: this.imgUrl,
					resolution: form.resolution,
					width: form.width,
					id: form.id
				}
				planSubmit(params).then(res => {
					this.$message({
						type: "success",
						message: "操作成功!"
					});
					done()
				}, function(err) {
					done()
				})
			}
		}
	}
</script>
<style type="text/css" lang="scss">
	.plan_container {
		.avue-form__menu--center{text-align: center!important;}
	}
</style>
<style scoped="">
	
	.plan_wrap {
		margin-top: 20px;
		background-size: 100% 100%;
		background-repeat: no-repeat;	    
	}
</style>